<template>
	<div id="wrapper">
		<current-loc :curLoc="curLoc"></current-loc>
		<div class="main cle">
			<list-nav :currentCategoryName="currentCategoryName" :cateMenu="cateMenu" :proNum="proNum" :isObject="isObject" @on-change="changeMenu"></list-nav>
			<div class="maincon">
				<price-range :priceRange="priceRange" @on-change="changePrice"></price-range>
				<list-sort @on-sort="changeSort" :proNum="proNum"></list-sort>
				<div class="list-detail">
					<product-list :listData="listData"></product-list>
					<Page pre-text="上一页" next-text="下一页" end-show="false" :page="curPage" :total-page="totalPage" @pagefn="pagefn"></Page>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
// 产品列表
import productList from './product-list/productList';
// 左侧列表导航
import listNav from './list-nav/listNav';
// 列表排序
import listSort from './list-sort/listSort';
// 翻页
import page from './page/page';
// 当前位置(这个有点问题)
import currentLoc from './current-loc/current-loc';
// 价格范围
import priceRange from './price-range/priceRange';

import { getCategory, getGoods } from '../../api/api';
export default {
	data() {
		return {
			curPage: 1, // 页码
			top_category: '', // 商品种类
			listData: [],
			cateMenu: {}, //菜单列表
			isObject: true,
			ordering: '-add_time',
			proNum: 0, //商品数量
			curLoc: [], //当前位置
			priceRange: [], //价格区间
			pricemin: '', //价格最低
			pricemax: '', //价格最高
			pageType: 'list',
			searchWord: '',
			currentCategoryName: ''
		};
	},
	components: {
		'product-list': productList,
		'list-nav': listNav,
		'list-sort': listSort,
		Page: page,
		'current-loc': currentLoc,
		'price-range': priceRange
	},
	props: {},
	created() {
		this.getAllData();
	},
	watch: {
		$route: 'getAllData'
	},
	computed: {
		totalPage() {
			return Math.ceil(this.proNum / 12);
		}
	},
	methods: {
		getAllData() {
			console.log(this.$route.params);
			if (this.$route.params.id) {
				this.top_category = this.$route.params.id;
				this.getMenu(this.top_category); // 获取左侧菜单列表
			} else {
				this.getMenu(null); // 获取左侧菜单列表
				this.pageType = 'search';
				this.searchWord = this.$route.params.keyword;
			}

			this.getCurLoc(); // 获取当前位置
			this.getListData(); //获取产品列表
			this.getPriceRange(); // 获取价格区间
		},
		getListData() {
			if (this.pageType == 'search') {
				getGoods({
					search: this.searchWord //搜索关键词
				})
					.then(response => {
						this.listData = response.data.results;
						this.proNum = response.data.count;
					})
					.catch(function(error) {
						console.log(error);
					});
			} else {
				getGoods({
					page: this.curPage, //当前页码
					top_category: this.top_category, //商品类型
					ordering: this.ordering, //排序类型
					pricemin: this.pricemin, //价格最低 默认为‘’ 即为不选价格区间
					pricemax: this.pricemax // 价格最高 默认为‘’
				})
					.then(response => {
						this.listData = response.data.results;
						this.proNum = response.data.count;
					})
					.catch(function(error) {
						console.log(error);
					});
			}
		},
		getMenu(id) {
			if (id != null) {
				getCategory({
					id: this.$route.params.id
				})
					.then(response => {
						this.cateMenu = response.data.sub_cat;
						this.currentCategoryName = response.data.name;
					})
					.catch(function(error) {
						console.log(error);
					});
			} else {
				getCategory({})
					.then(response => {
						this.cateMenu = response.data;
						this.isObject = false;
					})
					.catch(function(error) {
						console.log(error);
					});
			}
		},

		getCurLoc() {
			// 当前位置
			this.$http
				.post('/currentLoc', {
					params: {
						proType: this.type //商品类型
					}
				})
				.then(response => {
					this.curLoc = response.data;
				})
				.catch(function(error) {
					console.log(error);
				});
		},
		getPriceRange() {
			this.$http
				.post('/priceRange', {
					params: {
						proType: this.type //商品类型
					}
				})
				.then(response => {
					this.priceRange = response.data;
				})
				.catch(function(error) {
					console.log(error);
				});
		},
		changeSort(type) {
			this.ordering = type;
			this.getListData();
		},
		changePrice(data) {
			this.pricemin = data.min;
			this.pricemax = data.max;
			this.getListData();
		},
		changeMenu(id) {
			this.top_category = id; //重新获取
			this.pricemin = ''; //价格最低
			this.pricemax = ''; //价格最高
			this.getCurLoc();
			this.getMenu(id);
			this.getListData();
		},
		pagefn(value) {
			//点击分页
			this.curPage = value.page;
			this.getListData();
		}
	}
};
</script>
<style lang="scss">
.maincon {
	width: 970px;
	float: right;
}
</style>
